<template>
  <ContentWrap>
    <div style="float: left; margin-bottom: 10px">
      <el-text style="font-size: 16px; padding-right: 10px">{{ bookName }}</el-text>
      <el-button @click="retreat" type="primary">返回</el-button>
    </div>
  </ContentWrap>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="实体名称" prop="entityName">
        <el-input
          v-model="queryParams.entityName"
          placeholder="请输入实体名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column align="center" label="类别" fixed="left" prop="entityType" width="100">
        <template #default="scope">
          <span>{{ scope.row.entityType == 1 ? "人物" : scope.row.entityType == 2 ? "事件" : "地点" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="entityName" label="名称" width="200"/>
      <el-table-column align="center" prop="sentence" label="上下文">
        <template #default="scope">
          <span v-html="highlight(scope.row.sentence, scope.row.entityName)"></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template #default="scope">
          <div v-if="scope.row.status==0">
            <el-button link type="success" @click="updateStatus(scope.row.id, true)"> 正确</el-button>
            <!--            <el-button link type="primary" @click="updateStatus(scope.row.id, false)"> 错误</el-button>-->
          </div>
          <div v-if="scope.row.status==1">
            <el-button link type="primary" @click="updateStatus(scope.row.id, false)"> 撤销</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="queryParams.currentPage" :page-size="queryParams.pageSize"
                   :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="false"
                   layout="total, sizes, prev, pager, next, jumper" :total="queryParams.count"
                   @tab-click="handleTabClick"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>
  </ContentWrap>
</template>

<script lang="ts" setup>
import router from '@/router'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import {ref} from "vue";
import * as FormApi from "@/api/kg/process/check";

defineOptions({name: 'KGProcessCheck'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(false)
const total = ref(0)
const bookName = ref("")
const list = ref([
  {
    entityType: '人物',
    entityName: '毛泽东',
    sentence: '因为,彼时彼刻,毛泽东和他的战友们所面临的处境,实在是艰险万分,万分艰险。',
    status: '2'
  },
  {
    entityType: '地点',
    entityName: '贵州',
    sentence: '此举原本并不在这次后来逐渐展露出非凡意义的远征计划之中,人贫地瘠的贵州原本也不是当时中共中央决策层所垂青的转战地域。',
    status: '2'
  },
  {
    entityType: '事件',
    entityName: '遵义会议',
    sentence: '所以说,遵义会议这第一个决议可不是一个 “挽救了革命挽救了党”的决议,而是差点儿就相反。',
    status: '2'
  }
]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  count: 1,
  entityName: undefined,
  entityType: undefined,
  bookId: undefined,
  status: undefined,
})

const handleQuery = () => {
  getTableData()
}
const queryFormRef = ref<any>()
const resetQuery = () => {
  queryFormRef.value.resetFields()
  getTableData()
}
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  getTableData()
}
// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getTableData()
}
const getTableData = async () => {
  const params = {
    pageNo: queryParams.pageNo,
    pageSize: queryParams.pageSize,
    entityName: queryParams.entityName,
    entityType: queryParams.entityType,
    bookId: queryParams.bookId,
    status: queryParams.status,
  }

  FormApi.getEntityChickPage(params).then((res) => {
    list.value = res.list
    bookName.value = res.list[0].bookName
    queryParams.count = res.total
  })
}

const updateStatus = (id: any, type: boolean) => {
  let params
  if (type) {
    params = {id: id, status: 1}
  } else {
    params = {id: id, status: 0}
  }
  FormApi.updateStatusEntityChick(params).then((res) => getTableData())

}
const highlight = (sentence, word) => {
  return sentence.replace(word, '<span style="color: red">' + word + '</span>')
}

onMounted(() => {
  getTableData()
})
const retreat = () => {
  router.go(-1)
}
</script>

<style scoped></style>
